Get Start Learn Bootstrap 3

Here's what you have to need to include in your web pages in order to use Bootstrap.

Bootstrap uses its own CSS and JS files, which you need to link to. You should also add the HTML5 <!DOCTYPE> as well as add two <meta> elements.

HTML5 <!DOCTYPE>

Your HTML documents should begin with the HTML5 <!DOCTYPE> to specify which language and version the document is using. Like this:

<!DOCTYPE html>

...

</html>

Add <meta> Elements

Viewport

To ensure proper rendering and touch zooming on mobile devices, add the viewport <meta> tag, like this:

You can (optionally), disable zooming capabilities on mobile devices by adding user-scalable=no to the list of content values. However, this is not recommended.

Force Internet Explorer to use its Latest Rendering Mode

The following code forces Internet Explorer to use its latest rendering mode:

CSS & JS Files

You can either download the CSS and JS files from the Bootstrap website, or you can link directly to the files via a CDN (Content Delivery Network).

All Bootstrap plugins use JQuery so you'll need to ensure you're using that too.

You can place these files in the document's <head>, however, you may wish to place the javascript files at the bottom of your document (just before the end <body> tag) for performance purposes.

Containers

Bootstrap requires a containing element to wrap elements and contain its grid system (more on the grid system next). Bootstrap's container classes were created specifically for this purpose.

Bootstrap containers can be either fixed or fluid.

Fixed Container

A fixed container is a (responsive) fixed width container. As you resize your browser, its width will remain intact, until it passes a certain breakpoint (as specified by you â€” more on that next), at which time it will resize to the new width for that break point.

...

</div>

Fluid Container

A fluid container spans the full width of the viewport. It will expand and contract fluidly as you resize the browser. This is in contrast to the fixed width container which will appear to "jump" to the new size as you pass a given break point.

...

</div>

Quick Start: Bootstrap Template

You can use the following template as a basis for your Bootstrap web pages. This template contains the necessary <!DOCTYPE> preamble, links to CSS and JS files, as well as the viewport <meta> tag.

<!--
DOCTYPE -->

<!DOCTYPE
html>

<html
lang="en">

<head>

  <title>Bootstrap Example Template</title>

  <meta charset="utf-8">

  <!-- Viewport Meta Tag -->

  <meta name="viewport"
content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>

  <!-- YOUR CONTENT GOES HERE -->

  <div class="container">

  </div>

  <!-- JavaScript: placed at the end of the
document so the pages load faster -->

  <!-- JQuery -->

  <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- Bootstrap JS -->

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>

PRV MENU NEXT

Get Start Learn Bootstrap 3

Latest Post